<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item> <span class="headerSpan"></span>添加规格<el-button size="small" icon="el-icon-arrow-left" @click="$router.go(-1)">返回</el-button></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="addParm">
      <div class="addParm_hed">添加参数</div>
      <!-- form表单区域 -->
      <el-form :model="addParmForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="规格名称:" prop="name" label-width="130px">
          <el-input v-model="addParmForm.name"></el-input>
        </el-form-item>
        <el-form-item label="规格参数组:" label-width="130px">
          <el-cascader v-model="addParmForm.template_id" :options="superiorParm" clearable @change="changeParm" :props="{ checkStrictly: true }"></el-cascader>
        </el-form-item>
        <el-form-item label="该属性的录入方式:" label-width="130px">
          <el-radio v-model="radio" label="1">手工录入</el-radio>
          <el-radio v-model="radio" label="2">从下面的列表中选择(一行代表一个可选值)</el-radio>
        </el-form-item>
        <el-form-item label="属性可选值列表:" prop="options" label-width="130px">
          <template>
            <div>
              <div class="xuanzekuang">
                <div>黑色</div>
                <div>红色</div>
                <div>白色</div>
                <div>粉色</div>
              </div>
              <div class="shizhi">设置属性颜色</div>
            </div>
          </template>
        </el-form-item>
        <el-form-item label="是否支持手动新增:" label-width="130px">
          <el-radio v-model="radio" label="1">是</el-radio>
          <el-radio v-model="radio" label="2">否</el-radio>
        </el-form-item>
        <el-form-item label="规格排序:" prop="seq" label-width="130px">
          <el-input v-model="addParmForm.seq"></el-input>
          <div class="tishi">排序级别最高的属性可单独上传属性图片</div>
        </el-form-item>
        <el-form-item label-width="130px">
          <el-button type="primary" @click="addParm()">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      radio: '2',
      addParmForm: {
        id: this.$route.query.id,
        name: '颜色',
        specNum: null,
        paraNum: null,
        seq: null
      },
      superiorParm: [],
      rules: {
        name: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async getParm() {
      const { data: res } = await this.$http.get('/category/findAllCategory')
      // let arr = []
      // res.PageResult.rows.forEach(item => {
      //   arr.push({
      //     value: item.id,
      //     label: item.name
      //   })
      // })
      // this.superiorParm = arr
      this.superiorParm = res.PageResult.rows
      console.log(res)
    },
    changeParm(value) {
      // console.log(value.length)
      if (value.length !== 2) {
        this.addParmForm.parentId = value[0]
      } else {
        this.addParmForm.parentId = value[1]
      }
    },
    changeTemplate(value) {
      this.addParmForm.templateId = value[0]
      // console.log(value)
    },
    addParm() {
      console.log('提交了')
      this.$refs.ruleForm.validate(async valid => {
        if (!valid) {
          return
        }
        console.log(this.addParmForm)
        const { data: res } = await this.$http.post('/spec')
        console.log(res)

        // this.$router.push('/goods/Parm')
      })
    }
  },
  created() {
    this.getParm()
  }
}
</script>
<style lang="less" scoped>
.addParm {
  position: relative;
  margin: 20px 40px 20px 20px;
  border: 1px solid #e6e6e6;

  .addParm_hed {
    width: 100%;
    height: 45px;
    padding-left: 20px;
    color: #666666;
    font-size: 12px;
    line-height: 45px;
    border-bottom: 1px solid #e6e6e6;
    background-color: #f3f3f3;
  }
  .el-form {
    position: absolute;
    top: 100px;
    left: 300px;
    .el-input,
    .el-cascader {
      width: 250px;
    }
  }
  .tishi {
    color: #aaa;
  }
}
.el-form-item__label {
  width: 130px !important;
}
.el-form-item__content {
  margin-left: 130px !important;
}
.xuanzekuang {
  width: 450px;
  height: 200px;
  border: 1px solid #eee;
}
.shizhi {
  color: #20a5ff;
}
</style>
